<template>
  <div id="wisdomPark-section-v2">
    <MyHeadline title="本周能耗监测" :islink="false" style="padding-left: 0px">
      <template v-slot:rigth>
        <el-button type="primary" link>耗水量</el-button>
        <el-button type="primary" link>耗电量</el-button>
      </template>
    </MyHeadline>
    <MyCell>
      <div class="content">
        <HtEcharts :options="echarts_options" />
      </div>
    </MyCell>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { deepCopy } from '@/utils/utils'
import * as echarts from 'echarts'
import HtEcharts from '@/base-ui/echarts/index'
import MyCell from '@/components/my-cell/index.vue'
import MyHeadline from '@/components/my-headline/index.vue'

import echartsConfig from '../config/wisdomPark-section-v2/echarts-config'
// ========================= 实例

// ========================= 钩子
onMounted(() => {
  echarts_init()
})

// ========================= 数据
// 初始化
const echarts_init = () => {
  onEcharts_data(7)
}

// echarts 配置
const echarts_options = ref(deepCopy(echartsConfig))

// ========================= 函数
// 随机数
const getRandomInt = (min: number, max: number): number => {
  min = Math.ceil(min)
  max = Math.floor(max)
  return Math.floor(Math.random() * (max - min + 1)) + min
}

// echartsv3数据
const onEcharts_data = (num: number) => {
  const seriesData: any = [
    {
      type: 'line',
      stack: 'x',
      smooth: false,
      // symbol: 'none',
      symbolSize: 5,
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgba(92, 123, 217,0.3)'
          },
          {
            offset: 1,
            color: 'rgba(92, 123, 217,0.3)'
          }
        ])
      },
      data: []
    }
  ]

  for (let i = 0; i < num; i++) {
    seriesData[0].data[i] = getRandomInt(50, 200)
  }
  echarts_options.value.series = seriesData
}
// ========================= 请求

defineExpose({
  echarts_init
})
</script>

<style scoped lang="less">
#wisdomPark-section-v2 {
  .width_height(100%,100%);
  .content {
    .width_height(100%,200px);
    box-sizing: border-box;
    padding: 0 @space_20 @space_20 @space_20;
  }
}
</style>
